<template>
  <a-modal
    :maskClosable="maskClosable"
    title="偏差分析"
    :width="1170"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-card :bordered="true" style="margin-bottom: 3%">
        <span class="card-title" slot="title">调度信息</span>

        <a-row
          style="margin: 22px 0"
          v-for="(item, key) in this.column.section1"
          :key="key"
          :gutter="24"
        >
          <a-col :span="3" style="text-align: right">
            <span>{{ item[0].label }}：</span>
          </a-col>
          <a-col :span="7">
            <span style="padding-left: 7%">
              {{ appInfo[item[0].key] || "暂无" }}
            </span>
          </a-col>

          <a-col :span="3" style="text-align: right">
            <span>{{ item[1].label }}：</span>
          </a-col>
          <a-col :span="7">
            <span style="padding-left: 7%">
              {{ appInfo[item[1].key] || "暂无" }}
            </span>
          </a-col>
        </a-row>
      </a-card>

      <a-card :bordered="true" style="margin-bottom: 2%">
        <span class="card-title" slot="title">调度结果偏差分析</span>
        <div class="analusis-wrapper">
          <div class="analysis-header">
            <a-row :gutter="[16, 25]">
              <a-col :span="4"></a-col>
              <a-col :span="16" style="text-align: center">
                <span
                  class="progress-tips"
                  style="background-color: rgb(34, 200, 252)"
                ></span>
                预测值
                <span
                  class="progress-tips"
                  style="background-color: rgb(254, 148, 1); margin-left: 40px"
                ></span>
                实际值
              </a-col>
              <a-col :span="3">偏差分析</a-col>
            </a-row>
          </div>
          <template v-if="resultDetail && resultDetail.factors">
            <div class="analysis-body">
              <a-row
                :gutter="[16, 25]"
                v-for="(d, i) in resultDetail.factors"
                :key="i"
              >
                <a-col :span="4" style="text-align: right">
                  {{ d.factorName + "：" }}
                </a-col>
                <a-col :span="16" style="padding-left: 100px">
                  <span
                    class="progress-text"
                    style="color: rgb(34, 200, 252); text-align: right"
                  >
                    {{ parseFloat(d.imagine).toFixed(2) + " " + d.unit }}
                  </span>
                  <div
                    style="display: inline-block; width: 300px; margin: 0 10px"
                  >
                    <div
                      class="progress-block progress-block-blue"
                      :style="setWidth(d.imagine, d.after)"
                    ></div>
                    <div
                      class="progress-block progress-block-orange marginTop2PX"
                      :style="setWidth(d.after, d.imagine)"
                    ></div>
                  </div>
                  <span
                    class="progress-text"
                    style="color: rgb(254, 148, 1); text-align: left"
                  >
                    {{ parseFloat(d.after).toFixed(2) + " " + d.unit }}
                  </span>
                </a-col>
                <a-col :span="3">
                  <template v-if="d.imagine > d.after">
                    <div style="color: rgb(48, 183, 53)">
                      {{
                        Math.abs(parseFloat(d.imagine - d.after)).toFixed(2) +
                        " " +
                        d.unit
                      }}
                      <a-icon type="arrow-down" />
                    </div>
                  </template>
                  <template v-else>
                    <div style="color: rgb(188, 71, 57)">
                      {{
                        Math.abs(parseFloat(d.imagine - d.after)).toFixed(2) +
                        " " +
                        d.unit
                      }}
                      <a-icon type="arrow-up" />
                    </div>
                  </template>
                </a-col>
              </a-row>
            </div>
          </template>
        </div>
      </a-card>
    </a-spin>
  </a-modal>
</template>
<script>
import { randomNum } from "@/utils/util";
import { gPostAction } from "@/api/manage";

export default {
  name: "AnalysisModal",
  data() {
    return {
      visible: false,
      confirmLoading: false,
      loading: false,
      appInfo: {},
      resultDetail: {},
      column: {
        section1: {
          row1: [
            {
              key: "appName",
              label: "应用名称",
            },
            {
              key: "cloudResourceTypeName",
              label: "调度类型",
            },
          ],
          row2: [
            {
              key: "srcDatacenterName",
              label: "原数据中心",
            },
            {
              key: "dstDatacenterName",
              label: "目标数据中心",
            },
          ],
        },
      },
      maskClosable: false,
    };
  },
  methods: {
    setWidth(valA, valB) {
      if (valA > valB) {
        return { width: "100%" };
      } else {
        return { width: randomNum(85, 95) + "%" };
      }
    },
    showModal(record) {
      this.visible = true;
      this.appInfo = record;
      this.resultDetail = {};
      this.loadData(record);
    },
    differenceFormatter(value) {
      if (value <= 0.6) {
        return "优秀";
      } else if (value > 0.6 && value < 0.8) {
        return "良好";
      } else if (value >= 0.8 && value <= 1) {
        return "合格";
      }
      return "不合格";
    },
    loadData(record) {
      this.confirmLoading = true;
      const postData = {
        appId: record.appId,
        srcDatacenterId: record.srcDatacenterId,
        dstDatacenterId: record.dstDatacenterId,
        schedulerModel: record.schedulerModel,
      };

      gPostAction("/scheduler/scheduler_result_analysis", postData)
        .then((res) => {
          if (res.success) {
            this.resultDetail = res.data;
          }
        })
        .finally(() => {
          this.confirmLoading = false;
        });
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
};
</script>

<style
  lang="less"
  scoped
>
.btn-group {
  text-align: right;

  .refresh-btn {
    margin-bottom: 15px;
  }
}

.marginTop2PX {
  margin-top: 2px;
}

/deep/ .ant-progress-success-bg {
  background-image: linear-gradient(
    to right,
    rgb(6, 238, 237),
    rgb(34, 200, 252)
  );
}

.progress-text {
  display: inline-block;
  font-size: 16px;
  position: relative;
  bottom: 3px;
  width: 100px;
}

.progress-block-blue {
  background-image: linear-gradient(
    to right,
    rgb(6, 238, 237),
    rgb(34, 200, 252)
  );
}

.progress-block-orange {
  background-image: linear-gradient(
    to right,
    rgb(248, 189, 1),
    rgb(254, 148, 1)
  );
}

.progress-block {
  border-radius: 5px;
  /* border: 2px solid rgb(75, 118, 180); */
  height: 10px;
}

.progress-tips {
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 7px;
  vertical-align: middle;
}

.analusis-wrapper {
  width: 100%;

  .analysis-header {
  }

  .analysis-body {
    /deep/ .ant-progress-show-info .ant-progress-outer {
      padding-right: 0;
    }

    .analysis-progress-left {
      display: inline-block;
    }

    .analysis-progress-right {
      display: inline-block;
    }

    .analysis-progress {
    }
  }
}
</style>